<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import {emitter} from "../core/eventBus";
import { useCounterStore } from "../store/index";
const counter = useCounterStore();
const model = defineModel();
console.log(model);
defineProps<{ msg: string }>();

const count = ref(0);
onMounted(() => {
  emitter.on("message", (data) => {
    console.log("接收的消息",data);
  });
  counter.increment();
});
onBeforeUnmount(() => {
  emitter.off("message");
});
</script>

<template>
  <div class="nav p-4 bg-blue-500 text-white">
    <button @click="counter.increment">加</button>
    <button @click="counter.decrement">减</button>
    <h1>{{ msg }}</h1>
    <h3>{{ count }}</h3>
    <div class="box"></div>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
.nav{
  h1{font-size: 1.5rem;}
  font-size: 1.25rem;
}
.box{width: 3rem;height: 5rem;background-color: #f00;}
</style>
